<template>
    <div class="page-register">
      <article class="header">
        <header>
          <a href="/" class="site-logo"></a>
          <span class="login">
            <em class="bold">已有美团账号?</em>
            <a href="/login">
            <el-button
              type="primary"
              size="small">
              登录
            </el-button>
          </a>
          </span>
        </header>
      </article>
      <section>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm">
          <el-form-item label="昵称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>

          <el-form-item label="验证码" prop="code">
            <el-input v-model="ruleForm.code" maxlength="4"></el-input>
            <el-button size="mini" round @click="sendMsg">发送验证码</el-button>
            <span class="status">{{statusMsg}}</span>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="cpwd">
            <el-input v-model="ruleForm.cpwd" type="password"></el-input>
          </el-form-item>
          <el-form-item >
            <el-button type="primary"@click="rejister">
              同意一下协议并注册
            </el-button>
            <div class="error">{{error}}</div>
          </el-form-item>
          <el-form-item>
              <a class="f1" href="https://rules-center.meituan.com/rules-detail/4" target="_blank">《美团点评用户服务协议》</a>
              <a class="f1" href="https://rules-center.meituan.com/rules-detail/2" target="_blank">《美团点评隐私政策》</a>
          </el-form-item>
        </el-form>
      </section>
    </div>
</template>
<script>
import CryptoJS from 'crypto-js'
export default {
  layout: 'blank',
  data () {
    return {
      ruleForm: {
        name: '',
        email: '',
        code: '',
        password: '',
        cpwd: ''
      },
      rules: {
        name: [{
            required: true,
            type: 'string',
            message: '请输入昵称',
            trigger: 'blur'
          }],
        email: [{
          required: true,
          type: 'email',
          message: '请输入邮箱',
          trigger: 'blur'
        }],
        password:[{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }],
        cpwd:[{
          required: true,
          message: '请确认密码',
          trigger: 'blur'
        },{
          validator: (rule,value,callback) => {
            if (value === '') {
              callback(new Error('请在此输入密码'))
            }else if (value !== this.ruleForm.password) {
              callback(new Error('两次密码不一致'))
            }else {
              callback()
            }
          },
          trigger: 'blur'
        }]
      },
      statusMsg: '',
      error: ''
    }
  },
  methods: {
    sendMsg () {
      let namePass
      let emailPass
      if (this.timerid) {
        return false
      }
      this.$refs['ruleForm'].validateField('name',(valid) => {
        namePass = valid
      })
      this.statusMsg = ''
      if (namePass) {
        return false
      }
      this.$refs['ruleForm'].validateField('email',(valid) => {
        emailPass = valid
      })
      // 上面的api有值表示错误
      if (!namePass && !emailPass) {
        this.$axios.post('http://localhost:3200/users/verify',{
          username: window.encodeURIComponent(this.ruleForm.name),
          email: this.ruleForm.email
        }).then(res => {
          if (res.status === 200 &&res.data && res.data.code === 0) {
            let count = 60
            this.statusMsg = `验证码已发送,剩余${count--}`
            this.timerid = setInterval(() => {
              this.statusMsg = `验证码已发送,剩余${count--}`
              if (count === 0) {
                clearInterval(this.timerid)
                this.statusMsg= ''
              }
            }, 1000)
          } else {
            this.statusMsg = res.data.msg
          }
        })
      }
    },
    rejister() {
      console.log('re')
      console.log(this.ruleForm.password)
      console.log(CryptoJS.MD5(this.ruleForm.password).toString())
      let that = this
      this.$refs['ruleForm'].validate((val) => {
        if (val) {
          this.$axios.post('http://localhost:3200/users/signup',{
            // username可能又中文 进行编码
            username: window.encodeURIComponent(this.ruleForm.name),
            // md5加密
            password: CryptoJS.MD5(this.ruleForm.password).toString(),
            // CryptoJS.MD5(this.ruleForm.password).toString()
            email: this.ruleForm.email,
            code: this.ruleForm.code
          }).then(({status, data}) => {
            if (status === 200) {
              if (data && data.code === 0) {
                location.href = '/login'
              }else {
                that.error = data.msg
              }
            } else {
              that.error = `服务器出错,错误代码${status}`
            }
            setTimeout(() => {
              that.error = ''
            }, 1500)
          })
        }
      })
    }
  }
}
</script>
<style lang="scss">
@import "../assets/css/register/index";
</style>
